<template>
  <view class="search">
	  <view class="search-background">
		  <u-search :show-action='true' action-text="取消" :action-style="{color: '#FFFFFF'}" :animation="false"
					placeholder="搜索商品名称" v-model="keyword" @search="onSearch" @custom="onCancel"></u-search>
	  </view>
	  <!-- <view class="search-type">
		<sl-filter :ref="'slFilter'" :isTransNav="true" :navHeight="0" :color="'#666666'" :themeColor="'#42CEC8'" :menuList="menuList"
		 @result="conditionChange"></sl-filter>
	  </view> -->

	  <view v-if="!search">
		  <view v-if="historyTags.length !==0" class="history-container">
			  <view class="history-title">
				  <view class="slide"></view>
				  <text>历史搜索</text>
				  <view style="flex:1"></view>
				  <view @click="onDeleteHistory" class="icon">
					  <u-icon name="trash-fill" color="#999999" size="32"></u-icon>
				  </view>
			  </view>
			  <view class="history-tags">
				  <view class="tag" v-for="(item,index) in historyTags" :key="index" @click="onSearch(item)">
					  <u-tag :text="item" color="#666666" border-color="#f3f3f3" bg-color="#f3f3f3"></u-tag>
				  </view>
			  </view>
		  </view>
	  </view>

	  <view v-else>
		  <view class="goods-list">
			  <view class="goods-item" v-for="(item,index) in searchList" :key="index" @click="toGoodsDetail(item.id)">
				  <view class="item-left">
					  <view class="img-content">
						  <image mode="aspectFit" :src="item.thumb_url"></image>
					  </view>
					  <view class="item-left-detail">
						  <view class="name">{{item.name}}</view>
						  <view class="desc">{{item.desc}}</view>
						  <view class="price-count">
							  <text class="price">￥{{item.selling_price}}</text>
							  <!-- <text class="sell-count" style="margin-left: 8px;">月销量300件</text> -->
						  </view>
						  <view class="tag">
							  <!-- <view class="tag-item">包邮</view>
                              <view class="tag-item">显示优惠</view> -->
						  </view>
					  </view>
				  </view>
				  <view class="item-right">
					  <image @click.stop="showCartModal(item.id)"style="width: 29px;height: 29px;" src="../../static/search/cart.png"></image>
				  </view>
			  </view>
		  </view>
		  <view>
			  <view class="null" v-if="searchList.length==total&&total==0&&searchShow">
				  搜索不到该商品~
			  </view>
			  <view class="null" v-if="searchList.length==total&&total>0">
				  没有更多了~
			  </view>
		  </view>
	  </view>

	  <cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>

  </view>
</template>

<script>
  import slFilter from '@/components/sl-filter/sl-filter.vue';
  import cartDialog from '@/components/cart-dialog/cart-dialog.vue'
  import {HistoryKeyword} from "../../model/HistoryKeyword";

  const history = new HistoryKeyword()
  export default {
	  name: "search",
	  components: {
		  slFilter,
		  cartDialog
	  },
	  data() {
		  return {
			  search: false,
			  filterResult: '',
			  keyword: '',
			  page: 1,
			  limit: 10,
			  total: 0,
			  searchList: [],
			  searchShow: false,
			  type: '',
			  showModal: false,
			  id: '',
			  menuList: [],
			  loadingStatus: 'loading',
			  iconType: 'flower',
			  loadText: {
				  loadmore: '轻轻上拉',
				  loading: '努力加载中',
				  nomore: '没有更多了'
			  },
			  historyTags: []
		  }
	  },
	  onShow() {

	  },
	  onLoad() {
		  this.historyTags = history.get()
	  },
	  onReachBottom() {
		  if (this.searchList.length == this.total && this.total > 0) {
			  return
		  }
		  this.page++;
		  this.getGoodsList()
	  },
	  methods: {
		  conditionChange(val) {
			  this.filterResult = JSON.stringify(val, null, 2);
		  },
		  searchOrderBy(type) {
			  this.type = type;
			  this.getGoodsList();
		  },
		  changeKeyWords(item) {
			  this.keyword = item;
			  this.getGoodsList();
		  },

		  onSearch(tag) {
			  if(tag){
				  this.keyword = tag
			  }
			  if (this.keyword.trim() == '') {
				  this.$currency.showToast('请输入关键字')
				  return;
			  }
			  this.search = true
			  history.save(this.keyword)
			  this.historyTags = history.get()
			  this.page = 1
			  this.searchList = []
			  this.getGoodsList()
		  },

		  //获取搜索结果
		  async getGoodsList(tag) {
			  wx.showLoading({
				  title: '加载中'
			  })
			  let merchant = wx.getStorageSync('merchant')
			  let params = {
				  keyword: this.keyword,
				  page: this.page,
				  limit: this.limit,
				  order_by: this.type,
				  merchant_id: merchant.merchant_id,
				  user_token: wx.getStorageSync('userToken')
			  }
			  const res = await this.$api.searchMedicine(params, this.$baseUrl);
			  if (res.data.level == 'success') {
				  if (this.page == 1) {
					  this.searchList = res.data.data;
				  } else {
					  if (res.data.data.length > 0) {
						  this.searchList = this.searchList.concat(res.data.data);
					  } else {
						  this.page--;
					  }
				  }
				  this.total = res.data.page_info.total;
				  this.searchShow = true;
				  wx.hideLoading()
			  }
		  },
		  toGoodsDetail(id) {
			  wx.navigateTo({url: '/pages/goodsDetail/goodsDetail?id=' + id})
		  },
		  hideCart() {
			  this.showModal = false;
		  },

		  //显示购物车
		  showCartModal(id) {
			  this.id = id;
			  this.showModal = true;
		  },
		  //隐藏购物车
		  hideCartModal() {
			  this.id = ''
			  this.showModal = false;
		  },

		  onDeleteHistory() {
			  history.clear()
			  this.historyTags = []
		  },

		  onCancel(event) {
			  this.search = false
		  },

	  }
  }
</script>

<style>
</style>

<style scoped lang="scss">
  @import "../../common/css/mixin";
  .search{
	  min-height: 100vh;
	  background-color: #FFFFFF;
	  padding-top: 100rpx;
	  box-sizing: border-box;
	.search-background{
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		background-image: url(../../static/search/search_background.png);
		background-size: 100% auto;
		padding: 25rpx 12px;
		box-sizing: border-box;
		background-color: #4CD964;
		z-index: 999999;
	}
	.search-type{
		background-color: #FFFFFF;
	}
	.goods-list{
		margin-top: 10px;
		background-color: #FFFFFF;
		.goods-item{
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1rpx solid #EEEEEE;
			.item-left{
				width: 78vw;
				display: flex;
				align-items: center;
				.img-content{
					margin: 0 10px;
					image{
						width: 80px;
						height: 80px;
					}
				}
				.item-left-detail{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 80px;
					.name{
						color: #2B2B2B;
						font-size: 13px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.desc{
						font-size: 11px;
						color: #A7A9A8;
					}
					.price{
						color: #FA476D;
						font-size: 14px;
						font-weight: bold;
					}

					.sell-count{
						font-size: 11px;
						color: #A7A9A8;
					}
				}
			}
			.item-right{
				width: 22vw;
				margin-top: auto;
				text-align: center;
			}
		}
		.goods-item:last-child{

		}
	}
  }
  .search-input{
    position: fixed;
    left: 0;
    top: 0;
    padding: 20rpx 30rpx;
    background: #15559a;
    width: calc(100vw - 60rpx);
    z-index: 1000;
    input{
      width: calc(100% - 160rpx);
      height: 80rpx;
      line-height: 80rpx;
      /*border: 1rpx solid #eeeeee;*/
      background: #fff;
      padding: 0 80rpx;
      border-radius: 32rpx;
    }
    .search-icon{
      position: absolute;
      top: 40rpx;
      left: 50rpx;
    }
    .search-clear{
      position: absolute;
      top: 40rpx;
      right: 50rpx;
      height: 40rpx;
      width: 40rpx;
    }
  }
  .body{
    padding-top: 40rpx;
  }
  .search-default{
    padding: 0 30rpx;
    .hot-search{
      .title{
        height: 50rpx;
        line-height: 50rpx;
      }
      .list{
        padding-top: 40rpx;
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        .item{
          width: calc((100% - 130rpx)/3);
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #e8e8e8;
          background: #ffffff;
          margin-right: 40rpx;
          margin-bottom: 40rpx;
        }
      }
    }
    .history-search{
      .title{
        @include flex(flex-start);
        flex-direction: row;
        height: 50rpx;
        line-height: 50rpx;
        .delicon{
          margin-left: auto;
          height: 50rpx;
          line-height: 50rpx;
          @include flex(flex-start);
          flex-direction: row;
          color: #707070;
          img{
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .list{
        padding-top: 40rpx;
        @include flexWrap(flex-start,flex-start);
        flex-direction: row;
        .item{
          width: calc((100% - 130rpx)/3);
          height: 50rpx;
          text-align: center;
          line-height: 50rpx;
          border: 1rpx solid #e8e8e8;
          background: #ffffff;
          margin-right: 40rpx;
          margin-bottom: 40rpx;

        }
      }
    }
  }
  .search-nav{
    position: fixed;
    top: 120rpx;
    left: 0;
    padding: 0 30rpx;
    background: #ffffff;
    width: calc(100vw - 60rpx);
    z-index: 1000;
    @include flex(flex-start);
    flex-direction: row;
    .search-nav-item{
      width: 33.3%;
      height: 50rpx;
      line-height: 50rpx;
      &:nth-child(2){
        text-align: center;
      }
      &:last-child{
        text-align: right;
      }
    }
  }
  .padding-top{
    padding-top: 20rpx;
  }
  .active{
    font-size: 32rpx;
    font-weight: bold;
  }

  .history-container{
	  display:flex;
	  flex-direction:column;

	  .history-title{
		  display:flex;
		  flex-direction:row;
		  align-items: center;
		  margin-top:38rpx;
	  }

	  .slide{
		  width:8rpx;
		  height: 46rpx;
		  background-color: #09C15F;
		  margin-right: 22rpx;
	  }

	  .icon{
		  margin-right: 30rpx;
	  }

	  .history-title > text{
		  font-size:28rpx;
		  color: #333333;
	  }

	  .history-tags{
		  width: 100%;
		  box-sizing: border-box;
		  display:flex;
		  flex-direction:row;
		  justify-content: flex-start;
		  margin-top:20rpx;
		  padding-left: 30rpx;
		  flex-wrap: wrap;
	  }

	  .tag{
		  background-color: #f3f3f3 !important;
		  color: #666666 !important;
		  margin-right: 20rpx;
		  margin-bottom: 20rpx;
	  }

	  .tag-selected{
		  background-color: #DCEBE6 !important;
		  color: #157658 !important;
		  margin-right:20rpx;
		  margin-bottom: 20rpx;
	  }
  }

  .search-list{
    @include flexWrap(center,flex-start);
    flex-direction: column;
    width: 100vw;
    /*background: #ffffff;*/
    .search-item{
      width: calc(100% - 40rpx);
      padding: 20rpx;
      /*border-radius: 16rpx;*/
      border-bottom: 1rpx solid #eeeeee;
      overflow: hidden;
      background: #ffffff;
      @include flex(flex-start);
      flex-direction: row;
      .left{
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        .item-img{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        width: calc(100% - 200rpx);
        position: relative;
        .item-des{
          height: 100rpx;
          line-height: 50rpx;
          @include ellipsis(2);
          padding: 10px 0;
        }
        .price{
          font-size: 26rpx;
          @include flex(flex-start,flex-end);
          flex-direction: row;
          height: 60rpx;
          width: calc(100% - 300rpx);
          color: #e12317;
          .original{
            font-size: 22rpx;
            color: #707070;
            text-decoration: line-through;
            padding-left: 20rpx;
          }
        }
        .img{
          position: absolute;
          bottom: 0;
          right: 0;
          width: 40rpx;
          height: 40rpx;
        }
        .img-icon{
          position: absolute;
          bottom: 20rpx;
          right: 0;
          width: 20rpx;
          height: 20rpx;
          background: #e12317;
          border-radius: 360rpx;
          color: #ffffff;
          font-size: 18rpx;
          text-align: center;
          line-height: 20rpx;
        }
      }
    }
  }
  .null{
    padding: 40rpx;
    text-align: center;
    color: #707070;
    width: calc(100% - 80rpx);
  }
  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
  }
  .modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    padding-bottom: 40px;
  }

  .modalDlg_top{
    padding:5px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 35%;

  }
  .modalDlg_top>img{
    width:80px;
    height: 80px;
  }
  .modalDlg_top_right{
    margin-left:20px;
    width:calc(100% - 100px);
  }
  .modalDlg_top_right_name{
    display: flex;
    align-items: center;
    span{
      @include ellipsis(3)
    }
  }
  .modalDlg_top_right_name_tag{
    color:purple;
    display: inline-block;
    width:50px;
    text-align: center;
    border:1px solid purple;
    font-size: 10px;
    border-radius: 5px;
    margin-right:5px;
  }
  .modalDlg_top_right_name_tag+span{
    width:200px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .modalDlo_bottom{
    margin-left:5px;
  }
  .cart_price{
    margin-top:15px;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  .cart_price>span:nth-child(1){
    color:red;
  }
  .modalDlo_center{
    max-height: 45%;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
    width:100%;
    /*max-height: 45%;*/
  }
  .modalDlo_center_classify{
    display:flex;
    align-items: center;
    flex-wrap:wrap;
    margin:10px 0;
    /*padding-bottom: 50px;*/
  }
  .modalDlo_center_classify>view{
    border:1px solid #eee;
    padding:2.5px 5px;
    border-radius: 5px;
    margin-left:5px;
    text-align: center;
  }
  .modalDlo_center_tit{
    padding-left:10px;
  }
  .join_cart{
    width:100%;
    background: rgb(196, 75, 75);
    color:#fff;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    position: absolute;
    bottom:0;
  }
  button::after {
    border: none;
  }
  button {
    background-color: #fff;
    line-height: 16px;
    font-size: 10px;
    border-radius:0;
  }
  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }
</style>
